import { Input, Button, Carousel } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
// import { useIntl } from 'umi';
import styles from './index.less';
import IconsMenuSplit from '../../../../public/icons/menu_split.png';
// import IconsMenuSplit2 from '../../../../public/icons/menu_splite2.png';
import IconsMenuWarn from '../../../../public/icons/menu_warn.png';
import menu_baozhangjuece from '../../../../public/icons/menu_baozhangjuece.png';
import menu_canshushezhi from '../../../../public/icons/menu_canshushezhi.png';
import menu_chengguo from '../../../../public/icons/menu_chengguo.png';
import menu_dianzidangan from '../../../../public/icons/menu_dianzidangan.png';
import menu_guanlishujv from '../../../../public/icons/menu_guanlishujv.png';
import menu_jingfeishiyong from '../../../../public/icons/menu_jingfeishiyong.png';
import menu_kejijiangli from '../../../../public/icons/menu_kejijiangli.png';
import menu_kejizhuanghua from '../../../../public/icons/menu_kejizhuanghua.png';
import menu_keyanfuwu from '../../../../public/icons/menu_keyanfuwu.png';
import menu_keyanjidi from '../../../../public/icons/menu_keyanjidi.png';
import menu_keyanjixiao from '../../../../public/icons/menu_keyanjixiao.png';
import menu_keyanketi from '../../../../public/icons/menu_keyanketi.png';
import menu_linchuangyanjiu from '../../../../public/icons/menu_linchuangyanjiu.png';
import menu_lunlishencha from '../../../../public/icons/menu_lunlishencha.png';
import menu_neibushenji from '../../../../public/icons/menu_neibushenji.png';
import menu_notice from '../../../../public/icons/menu_notice.png';
import menu_rencaituandui from '../../../../public/icons/menu_rencaituandui.png';
import menu_shengwuyangben from '../../../../public/icons/menu_shengwuyangben.png';
import menu_shixiangshenqing from '../../../../public/icons/menu_shixiangshenqing.png';
import menu_shiyongshouce from '../../../../public/icons/menu_shiyongshouce.png';
import menu_shujvcaiji from '../../../../public/icons/menu_shujvcaiji.png';
import menu_xiangmuzhixing from '../../../../public/icons/menu_xiangmuzhixing.png';
import menu_xitongyonghu from '../../../../public/icons/menu_xitongyonghu.png';
import menu_more from '../../../../public/icons/more.png';
import menu_zhengcefagui from '../../../../public/icons/menu_zhengcefagui.png';
import menu_zhuanjiapingshen from '../../../../public/icons/menu_zhuanjiapingshen.png';
import { Link } from 'umi';
// import classNames from 'classnames'

export default (): React.ReactNode => {
  // const intl = useIntl();
  const [manHorizontalStyle, setMainHorizontalStyle] = useState<number>(2);

  return (
    <>
      <div
        className={styles.main}
        style={{ flexDirection: manHorizontalStyle === 1 ? 'row' : 'row-reverse' }}
      >
        <div
          className={styles.entry_1}
          style={{ float: manHorizontalStyle === 1 ? 'left' : 'right' }}
          onClick={() => {
            setMainHorizontalStyle(1);
          }}
        >
          <div className={styles.entryBox}>
            {/* 综合搜索 */}
            <div className={styles.searchDiv}>
              <span className={styles.search_tip}>综合搜索</span>
              <Input
                className={styles.search_input}
                placeholder="请输入关键字"
                prefix={<SearchOutlined />}
              />
              <Button className={styles.search_button}>搜索</Button>
              <Button className={styles.search_button}>高级搜索</Button>
            </div>
            {/* 第一行 */}
            <div className={styles.main_menu}>
              <div className={styles.menuItemName}>
                <div className={styles.menuItemTop}>
                  <div className={styles.menuFirstLeftLine}></div>
                  <span className={styles.menu_item_name}>用户中心</span>
                  <div className={styles.menuFirstRightPic}>
                    <img alt="logo" src={IconsMenuSplit} />
                  </div>
                </div>
                <div className={styles.menuItemBottom}>User center</div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_xitongyonghu} />
                  </div>
                  <span>系统用户</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_notice} />
                  </div>
                  <span>通知公告</span>
                </div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_zhengcefagui} />
                  </div>
                  <span>政策法规</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_keyanfuwu} />
                  </div>
                  <span>科研服务</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_shiyongshouce} />
                  </div>
                  <span>使用助手</span>
                </div>
              </div>
            </div>
            {/* 第二行 */}
            <div className={styles.main_menu}>
              <div className={styles.menuItemName}>
                <div className={styles.menuItemTop}>
                  <div className={styles.menuFirstLeftLine}></div>
                  <span className={styles.menu_item_name}>申报评审</span>
                  <div className={styles.menuFirstRightPic}>
                    <img alt="logo" src={IconsMenuSplit} />
                  </div>
                </div>
                <div className={styles.menuItemBottom}>Declaration review</div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_keyanketi} />
                  </div>
                  <span>科研课题</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_linchuangyanjiu} />
                  </div>
                  <span>临床研究</span>
                </div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_keyanjidi} />
                  </div>
                  <span>学科基地</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_rencaituandui} />
                  </div>
                  <span>人才团队</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_kejijiangli} />
                  </div>
                  <span>科技奖励</span>
                </div>
              </div>
            </div>

            {/* 第三行 */}
            <div className={styles.main_menu}>
              <div className={styles.menuItemName}>
                <div className={styles.menuItemTop}>
                  <div className={styles.menuFirstLeftLine}></div>
                  <span className={styles.menu_item_name}>过程管理</span>
                  <div className={styles.menuFirstRightPic}>
                    <img alt="logo" src={IconsMenuSplit} />
                  </div>
                </div>
                <div className={styles.menuItemBottom}>Process management</div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_xiangmuzhixing} />
                  </div>
                  <span>项目执行</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_shujvcaiji} />
                  </div>
                  <span>数据采集</span>
                </div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_shixiangshenqing} />
                  </div>
                  <span>事项申请</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_jingfeishiyong} />
                  </div>
                  <span>经费使用</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_chengguo} />
                  </div>
                  <span>成果登记</span>
                </div>
              </div>
            </div>

            {/* 第四行 */}
            <div className={styles.main_menu}>
              <div className={styles.menuItemName}>
                <div className={styles.menuItemTop}>
                  <div className={styles.menuFirstLeftLine}></div>
                  <span className={styles.menu_item_name}>数据应用</span>
                  <div className={styles.menuFirstRightPic}>
                    <img alt="logo" src={IconsMenuSplit} />
                  </div>
                </div>
                <div className={styles.menuItemBottom}>Data application</div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_guanlishujv} />
                  </div>
                  <span>管理数据</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_keyanjixiao} />
                  </div>
                  <span>科研绩效</span>
                </div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_baozhangjuece} />
                  </div>
                  <span>保障决策</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_kejizhuanghua} />
                  </div>
                  <span>技术转化</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_dianzidangan} />
                  </div>
                  <span>电子档案</span>
                </div>
              </div>
            </div>

            {/* 第五行 */}
            <div className={styles.main_menu}>
              <div className={styles.menuItemName}>
                <div className={styles.menuItemTop}>
                  <div className={styles.menuFirstLeftLine}></div>
                  <span className={styles.menu_item_name}>管理工具</span>
                  <div className={styles.menuFirstRightPic}>
                    <img alt="logo" src={IconsMenuSplit} />
                  </div>
                </div>
                <div className={styles.menuItemBottom}>Management tool</div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_lunlishencha} />
                  </div>
                  <span>伦理审查</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_zhuanjiapingshen} />
                  </div>
                  <span>专家评审</span>
                </div>
              </div>
              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_shengwuyangben} />
                  </div>
                  <span>生物样本</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_neibushenji} />
                  </div>
                  <span>内部审计</span>
                </div>
              </div>

              <div className={styles.menuBox}>
                <div className={styles.menuChildTop}>
                  <div className={styles.menuTopWarn}>
                    <img alt="logo" src={IconsMenuWarn} />
                  </div>
                  <span>1</span>
                </div>
                <div className={styles.menuChildBottom}>
                  <div className={styles.menuChildBottomPic}>
                    <img className={styles.menu_icon} alt="logo" src={menu_canshushezhi} />
                  </div>
                  <span>参数设置</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          className={styles.notice_1}
          style={{ float: manHorizontalStyle === 1 ? 'right' : 'left' }}
        >
          {/* 通知公告：标题 */}
          <div className={styles.notice_top_title}>
            <div className={styles.noticeLine}></div>
            <span>公告通知</span>
            <Link to="/" className={styles.notice_more}>
              更多
              <img alt="logo" src={menu_more} />
            </Link>
          </div>

          {/* 自动播放图片 */}
          <div className={styles.notice_banners}>
            <Carousel autoplay>
              <div>
                <h3 className={styles.notice_banners_carousel}>1</h3>
              </div>
              <div>
                <h3 className={styles.notice_banners_carousel}>2</h3>
              </div>
              <div>
                <h3 className={styles.notice_banners_carousel}>3</h3>
              </div>
              <div>
                <h3 className={styles.notice_banners_carousel}>4</h3>
              </div>
            </Carousel>
          </div>
          {/* 列表 */}
          <div className={styles.msg_top}>
            <div className={styles.msg_top_date}>
              <div className={styles.msg_date}>03-10</div>
              <div className={styles.msg_year}>2020</div>
            </div>
            <div className={styles.msg_title}>赵玉沛院长发表总结</div>
            <div className={styles.msg_content}>赵玉沛院长发表总结讲话，这次会…</div>
          </div>
          <div className={styles.msg_one}>
            <div className={styles.msg_one_left}>
              <div className={styles.msg_one_day}>01</div>
              <div className={styles.msg_one_month}>2020.03</div>
            </div>
            <div className={styles.msg_one_right}>
              <div className={styles.msg_one_title}>我院6名医生东单体育馆</div>
              <div className={styles.msg_one_content}>
                赵玉沛院长发表总结讲话，这次会议是一个“高质量会议”…
              </div>
            </div>
          </div>
          <div className={styles.msg_one}>
            <div className={styles.msg_one_left}>
              <div className={styles.msg_one_day}>01</div>
              <div className={styles.msg_one_month}>2020.02</div>
            </div>
            <div className={styles.msg_one_right}>
              <div className={styles.msg_one_title}>我院6名医生东单体育馆</div>
              <div className={styles.msg_one_content}>
                赵玉沛院长发表总结讲话，这次会议是一个“高质量会议”…
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
